{% extends 'base.html' %}
{% block head %}
<style>
  .category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
</style>
{% endblock %}

{% block content %}
<div class="container mx-auto">
  <h1 class="text-3xl font-bold text-gray-800 mb-6">笔记分类</h1>

  {% if categories %}
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {% for category in categories %}
    <div class="category-card bg-white rounded-lg shadow-md p-6 transition-all duration-200 ease-in-out">
      <h2 class="text-xl font-semibold text-gray-800 mb-2">{{ category.name }}</h2>
      <p class="text-gray-600 text-sm mb-4">
        {% if category.description %}
          {{ category.description|truncatewords:20 }}
        {% else %}
          <span class="italic text-gray-400">暂无描述</span>
        {% endif %}
      </p>
      <div class="flex justify-between items-center">
        <span class="text-xs text-gray-500">
          {{ category.notebooks.count }} 篇笔记
        </span>
        <button class="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition-colors">
          查看笔记
        </button>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="container mx-auto size-full flex items-center justify-center">
    <div class="grow px-6 py-24 mb-6">
      <h1 class="text-6xl font-bold text-gray-800 mb-4">暂无分类</h1>
      <p class="text-gray-600 mb-8">还没有创建任何分类</p>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}